<template>
    <div class="f-tag-list" :style="{ left:$store.state.asideWidth }">
        <span class="tag-btn text-gray-500 bg-transparent" 
        :class="{ 'text-gray-300':isMin }"
        @click="handleScroll('pre')"
        v-if="showPreBtn">
            <el-icon><arrow-left-bold /></el-icon>
        </span>
        <div ref="tagList" class="tag-left" @scroll="onScroll">
            <span
            :ref="el => { if (el) tagBtn[index] = el }"
            class="tag-btn text-gray-500 mr-2" 
            v-for="(item,index) in tagListData" 
            :key="index"
            :class="{ 'tag-btn-active': item.path == activePath }"
            @click="$router.push(item.path)">
                {{ item.title }}
                <el-icon class="ml-1" v-if="item.path != '/'" @click.stop="handleCloseTag(item.path)"><close /></el-icon>
            </span>
        </div>
        <span class="tag-btn text-gray-500 bg-transparent" 
        :class="{ 'text-gray-300':isMax }"
        @click="handleScroll('next')"
        v-if="showNextBtn">
            <el-icon><arrow-right-bold /></el-icon>
        </span>
        <span class="ml-auto tag-btn">
            <el-dropdown 
            placement="bottom-end"
            @command="handleClose">
                <el-icon><arrow-down /></el-icon>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="clearOtherTag">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="clearAllTag">全部关闭</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
    <div style="height:44px;"></div>
</template>
<script setup>
    import { ref,onMounted, computed ,watch} from 'vue'
    import { onBeforeRouteUpdate,useRoute,useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    import { useResizeObserver } from '@vueuse/core'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    // 绑定dom
    const tagList = ref(null)
    const tagBtn = ref([])
watch(
  () => router.currentRoute.value,
  (to,from) => {
    console.log('newValue',to,from)
    store.commit("addTag",{
            title:to.meta.title,
            path:to.path
        })
        activePath.value = to.path
    console.log(tagListData);
        setTimeout(()=>{
            activeTag(to.path,300)
        },200)
  },
//   { immediate: true }
)
    const isMin = ref(true)
    const isMax = ref(false)
    const showPreBtn = ref(false)
    const showNextBtn = ref(false)
    
    const activePath = ref(route.path)
    // 初始化tagList
    const { tagListData,onScroll } = useInitTagList()

    // 路由守卫
    // onBeforeRouteUpdate((to,from)=>{
    //     console.log(to,from,"========");
    //     store.commit("addTag",{
    //         title:to.meta.title,
    //         path:to.path
    //     })
    //     activePath.value = to.path
    // console.log(tagListData);
    //     setTimeout(()=>{
    //         activeTag(to.path,300)
    //     },200)
    // })

    // 处理关闭命令
    const handleClose = (c)=>{
        if(c == "clearAllTag"){
            router.push("/")
        }
        store.commit(c,activePath.value)
    }

    // 关闭tag
    const handleCloseTag = (path)=>{
        if(path == activePath.value){
            router.push("/")
        }
        store.commit("removeTag",path)
    }


    // 上一页/下一页
    const handleScroll = (type)=>{
        if((type == 'next' && isMax.value) || (type == 'pre' && isMin.value)){
            return
        }
        let clientWidth = tagList.value.clientWidth
        let scrollWidth = tagList.value.scrollWidth
        let max = scrollWidth - clientWidth
        let scrollLeft = tagList.value.scrollLeft
        if(type == 'next'){
            scrollLeft = scrollLeft + clientWidth
            // tagList.value.scrollLeft = scrollLeft > max ? max : scrollLeft
            animateScrollLeft(scrollLeft > max ? max : scrollLeft,200)
        } else {
            scrollLeft = scrollLeft - clientWidth
            // tagList.value.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft
            animateScrollLeft(scrollLeft < 0 ? 0 : scrollLeft,200)
        }
    }

    // 获取tagList的相关状态
    function getTagListState(){
        let clientWidth = tagList.value.clientWidth
        let scrollWidth = tagList.value.scrollWidth
        let max = scrollWidth - clientWidth
        let min = 0
        isMin.value = tagList.value.scrollLeft == min
        isMax.value = tagList.value.scrollLeft == max

        showPreBtn.value = showNextBtn.value = max > 0
    }

    // 让当前激活标签处于可视范围
    function activeTag(path,time = 0){
        let clientWidth = tagList.value.clientWidth
        let index = tagListData.value.findIndex(o=>o.path == path)
        let el = tagBtn.value[index]
        if(el){
            let scrollLeft = el.offsetLeft
            animateScrollLeft(scrollLeft - 40,time)
        }
    }

    // 滚动动画
    function animateScrollLeft(number = 0, time){
        if(number < 0){
            number = 0
        }
        if (!time) {
            tagList.value.scrollLeft = number;
            return number;
        }
        const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
        let spacingInex = time / spacingTime; // 计算循环的次数
        let nowLeft = tagList.value.scrollLeft; // 获取当前滚动条位置
        let everLeft = (number - nowLeft) / spacingInex; // 计算每次滑动的距离
        let scrollTimer = setInterval(() => {
            if (spacingInex > 0) {
                spacingInex--;
                animateScrollLeft(nowLeft += everLeft);
            } else {
                clearInterval(scrollTimer); // 清除计时器
            }
        }, spacingTime);
    };

    // 初始化taglist
    function useInitTagList(){
        store.commit("initTagList")
        const tagListData = computed(()=>store.state.tagList)

        // 添加标签页
        store.commit("addTag",{
            title:route.meta.title,
            path:route.path
        })

        // 监听tagList宽高变化
        useResizeObserver(tagList, (entries) => {
            getTagListState()
        })

        // 监听滚动
        const onScroll = (e)=> getTagListState()

        // 页面渲染
        onMounted(()=>{
            getTagListState()

            activeTag(activePath.value)
        })

        return {
            tagListData,
            onScroll
        }
    }
</script>
<style scoped>
.f-tag-list{
    @apply fixed right-0 flex items-center px-2 bg-gray-100;
    top: 64px;
    height: 44px;
    z-index: 100;
}
.tag-left{
    @apply flex-1 flex items-center;
    overflow: hidden;
}
.tag-left::-webkit-scrollbar {
    width: 0px;
    height: 4px;
}
.tag-btn{
    height: 32px;
    @apply flex items-center justify-center rounded bg-light-50 px-3 text-sm flex-shrink-0;
    cursor: pointer;
}
.tag-btn-active{
    @apply text-indigo-500;
}
</style>